<!--
 * @Description: 带拆分的多指标折线图
 * @Author: xjc
 * @Date: 2022-06-21 11:21:10
 * @LastEditTime: 2022-06-21 11:24:32
 * @LastEditors: xjc
-->
<template>
  <div id="scenario-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Line} = G2Plot

onMounted(() => renderScenario())

function renderScenario() {
  const seriesKey = 'series'
  const valueKey = 'value'

  fetch('https://gw.alipayobjects.com/os/antfincdn/UjzkGj7yin/multiple-measures-line-data.json')
  .then(data => data.json())
  .then(data => {
    const meta = {
      date: {alias: '销售日期'},
      price: {alias: '单价'},
      discount_price: {alias: '折扣单价'},
    };
    const line = new Line('scenario-container', {
      data: processData(data, ['price', 'discount_price'], 'channel', meta),
      padding: 'auto',
      xField: 'date',
      yField: valueKey,
      seriesField: seriesKey,
      appendPadding: [0, 8, 0, 0],
    })

    line.update({ 
      "theme": { 
        "styleSheet": { 
          "brandColor": "#025DF4", 
          "paletteQualitative10": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF"], 
          "paletteQualitative20": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF", "#FFC328", "#A0DC2C", "#946DFF", "#626681", "#EB4185", "#CD8150", "#36BCCB", "#327039", "#803488", "#83BC99"] 
        } 
      } 
    })
    line.render()
  })
}
function processData(data, yFields, seriesField, meta) {
  const seriesKey = 'series'
  const valueKey = 'value'
  const result = []

  data.forEach((d) => {
    yFields.forEach((yField) => {
      const name = meta?.[yField]?.alias || yField;
      result.push({...d, [seriesKey]: `${d[seriesField]}:${name}`, [valueKey]: d[yField]})
    })
  })

  return result
}
</script>
